<template>
  <div class="film">
    <div class="mylist">
      <ul  v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
        <li v-for="(item,index) in movielist" :key="index">
          <img :src="item.poster" @click="go(item.filmId)">
          <aside>
            <p>{{item.name}}</p>
            <p style="margin-top:0.1rem">主演:
              <span v-for="(actors,index) in item.actors" :key="index">
                {{actors.name}}&nbsp;
              </span>
            </p>
            <p class="paybtn">
              <span>{{item.nation}} {{item.category}}</span><br/>
              <button v-if="type===2">
                <router-link to="" :style="{color:color}">预售</router-link>
              </button>
              <button v-if="type===1" >
                <router-link to=""> 购买</router-link>
              </button>
            </p>
          </aside>
          
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { getMovieList} from '../../api'
export default {
  data(){
    return {
      movielist:[],
      color:'rgb(255, 196, 100)',
      loading:false,
      type:'',
      page:1,
      total:2
    }
  },
  watch:{
    $route:{
      handler(n,o){
        this.resetList();
        var p = n.params.type
        if(!p){
          this.$router.push("/filmlist/nowPalying")
        }
        this.type= p==="nowPlaying"?1:2;
        this.getData(this.type,this.page)
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    loadMore(){
      this.page++;
      this.getData(this.type,this.page)
    },
    getData(type,page){
      // console.log(this.movielist.length)
      if(this.movielist.length>=this.total){
        Toast({
          message:'到底啦...',
          duration:1000
        })
        return;
      }
      this.loading=true;
      getMovieList(type,page).then((res)=>{
        this.movielist=this.movielist.concat(res.data.data.films)
        this.total=res.data.data.total;
        this.loading=false;
        console.log(this.movielist)

      })
    },
    resetList(){
      this.page=1;
      this.loading=false;
      this.movielist=[];
    },
    go(id){
      this.$router.push('/detail/'+id)//在路由表中的:id会接收到这里赋给的值
    }
  }
}
</script>

<style scoped>
.film .mylist ul{
  display: flex;
  flex-direction: column;
  /* padding:0 0.2rem; */
}
.film .mylist ul li{
  margin:0.2rem 0 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.film .mylist ul li img{
  width:1.4rem;height:1.8rem;
}
.film .mylist ul li aside{
  width:78%;
  height:1.8rem;
  /* margin-left:0.2rem; */
  /* display: flex;
  flex-direction: column; */
}
.film .mylist ul li aside p{
  margin:0;
  width:100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.film .mylist ul li aside .paybtn button{
  width:1rem;height:0.67rem;
  font-size:0.3rem;
  border: none;;border-radius: 0.5rem;
  float:right;
}
.film .mylist ul li aside .paybtn button a{
  color:orangered;
}
.film .mylist ul{
  display: flex;
  flex-direction: column;
  /* padding:0 0.2rem; */
}
.film .mylist ul li{
  margin:0.3rem 0 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.film .mylist ul li img{
  width:1.32rem;height:1.7rem;
}
.film .mylist ul li aside{
  width:80%;
}
</style>>
